<template>
  <div>
    <!-- 商品列表组件 -->
    <!-- 一、面包屑导航 Breadcrumb 面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 二、Card 组件卡片区域 -->
    <el-card class="box-card">
      <!--Ⅰ、 row栅格布局 gutter 属性来指定每一栏之间的间隔-->
      <el-row :gutter="20">
        <!-- Ⅰ、1、搜索区域 -->
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getgoodsList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getgoodsList"
            ></el-button>
          </el-input>
        </el-col>
        <!-- Ⅰ、2、添加商品区域  -->
        <el-col :span="5">
          <el-button type="primary" @click="goAddGoodsPage">添加商品</el-button>
          <!-- 注册点击事件，点击跳转到添加商品add页面组件  编程式导航 -->
        </el-col>
      </el-row>

      <!-- Ⅱ、table表格内容区域 + 作用域插槽 -->
      <el-table :data="goodslist" border stripe>
        <!-- 索引列 -->
        <el-table-column
          type="index"
          :index="rowIndex"
          label="#"
        ></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column
          label="商品价格(元)"
          prop="goods_price"
          width="95px"
        ></el-table-column>
        <el-table-column
          label="商品重量"
          prop="goods_weight"
          width="70px"
        ></el-table-column>
        <el-table-column label="创建时间" prop="add_time" width="140px">
          <!-- 作用域插槽 + 全局格式化时间过滤器 -->
          <template slot-scope="scope">
            <!-- 手写 方式1 -->
            <!-- {{scope.row.add_time | dateFormat}}  -->
            <!-- moment.js插件 方式2 -->
            {{ scope.row.add_time | dateFormat("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140px">
          <!-- 作用域插槽 + 图标按钮-->
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editById(scope.row.goods_id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.goods_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Ⅲ、分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 3、编辑商品区域Dialog 对话框 -->
    <el-dialog
      title="编辑当前商品信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editClosed"
    >
      <!-- 编辑当前商品的form表单 -->
      <el-form
        :model="editFormData"
        :rules="editFormDataRules"
        ref="editFormDataRef"
        label-width="120px"
      >
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="editFormData.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格(元)" prop="goods_price">
          <el-input v-model="editFormData.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量(个)" prop="goods_number">
          <el-input v-model="editFormData.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量(kg)" prop="goods_weight">
          <el-input v-model="editFormData.goods_weight"></el-input>
        </el-form-item>
        <!-- 级联框 商品分类选中项的Id数组中 -->
          <el-form-item label="商品分类" prop="goods_cat">
          <!-- cascader级联选择器
                :options="cateList"，绑定渲染的数据源
                :props='cateProps',级联选择器配置对象
                @change="handleChange"，选择项变化触发的事件
                v-model="value",级联框中选中项的id值
                v-model="addForm.goods_cat",双向绑定，商品所属的分类数组，
                提交-添加商品，是字符串
               -->
              <el-cascader
                v-model="editFormData.goods_cat"
                :options="cateList"
                :props="cateProps"
                @change="handleChange"
              ></el-cascader>
        </el-form-item>


        <!-- <el-form-item label="商品介绍">
    <el-input v-model="editFormData.goods_introduce"></el-input>
  </el-form-item>
    <el-form-item label="图片临时路径">
    <el-input v-model="editFormData.pics"></el-input>
  </el-form-item>
     <el-form-item label="商品的参数">
    <el-input v-model="editFormData.attrs"></el-input>
  </el-form-item> -->
      </el-form>
      <!--底部  -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editgoods">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GoodsList",
  data() {
    return {
      //------------1、请求商品列表数据-----根据分页获取对应的商品列表数据------------
      //(1) 请求商品列表数据--携带的请求参数--查询参数对象
      queryInfo: {
        query: "", //查询参数,与搜索框内的值绑定
        pagenum: 1, //当前页码值
        pagesize: 10, //每页显示的条数
      },
      // //(2) 存储请求获取的所有商品列表数据，默认空
      goodslist: [],
      //(3) 总共商品条数,默认0
      totals: 0,

      //-----------3、编辑表单--------------
      //把获取到的当前商品数据存储到 data 中，作为编辑表单的数据源，渲染form
      editFormData: {
        goods_id:'',
        goods_name: "",
        goods_price: 0,
        goods_number: 0,
        goods_weight: 0,
         //双向绑定，级联框内选中项--商品所属的分类数组--3级[1, 3, 6]
        //此时是数组，提交时要转为字符串：以为','分割的分类列表1,3,6
        // goods_cat: [1, 3, 6],
        goods_cat: [],
        //图片的数组
        pics: [],
        //商品详情-介绍
        goods_introduce:'',
        //商品的参数（数组）
        attrs:[],
      },
      //控制编辑对话框的显示与隐藏
      editDialogVisible: false,
      //编辑编单数据的验证规则对象
      editFormDataRules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
      },
       //3、存储，请求获取到的商品分类数据列表,渲染级联框结构
      cateList: [],
      //级联选择器配置对象
      cateProps: {
        label: "cat_name", //级联框选中显示的值
        value: "cat_id", //选中项的id值,分类 ID
        children: "children",
        expandTrigger: "hover",
      },
    };
  },
  created() {
    //生命周期创建阶段：created--在初始化vue实例上的属性和方法之后 执行； created: function ()
    //1、一打开页面，立即调用获取渲染所有的商品列表数据
    this.getgoodsList();
    this.getCateList()
  },
  computed: {
    //计算每页的索引初始值--升序
    //计算属性，解决切换页码值，索引排序问题
    rowIndex() {
      //10条 1页
      //11-20 2页
      //index=(2-1)*10 +1 =1*10 +1 = 11,2页
      //21-30 3页
      //index=(3-1)*10 +1 =2*10 +1 = 21,3页
      return (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize + 1;
    },
  },
  methods: {
    //1、获取所有的商品列表数据
    async getgoodsList() {
      //(1)发起get请求，获取所有的商品列表数据
      const ret = await this.$http.get("goods", {
        params: this.queryInfo,
      });
      const res = ret.data;
      console.log(res);
      //(2)判断是否成功获取
      if (res.meta.status !== 200) {
        return this.$message.error("获取商品列表数据失败！" + res.meta.msg);
      }
      //(3)成功获取，把获取到的商品列表总数居 存储到 data中
      this.$message.success("成功获取商品列表数据！");
      this.goodslist = res.data.goods;
      this.totals = res.data.total;
      console.log(this.goodslist);
      console.log(this.totals);
    },

      //1、/3、请求获取所有的商品分类数据列表 1.6.1接口
    //type:不传递，则默认获取所有级别的分类,直接渲染到级联框，
    //页码部分不传递，默认获取所有分类。
    //故，此次get请求，不用传参
    async getCateList() {
      const ret = await this.$http.get(`categories`);
      const res = ret.data;
      console.log(res);
      //(2)判断是否获取成功
      if (res.meta.status !== 200) {
        return this.$message.error("获取商品分类数据列表失败！" + res.meta.msg);
      }
      //(3)获取成功，把获取到的商品数据列表 赋值、存储到 data中 的 cateList，渲染级联框结构
      this.$message.success("成功获取商品分类数据列表");
      this.cateList = res.data;
    },


    // --------Ⅲ--分页区域--------------------------------
    // 1 监听pagesize切换每页显示多少条数据变化，默认显示5条
    handleSizeChange(newPageSize) {
      console.log(`每页 ${newPageSize} 条`);
      //把最新的每页数据 赋值 给 data中的 pagesize
      this.queryInfo.pagesize = newPageSize;
      //重新发起请求 渲染 页面
      this.getgoodsList();
    },
    //2 监听pagenum当前页码值变化,默认显示第1页
    handleCurrentChange(newPageNum) {
      console.log(`当前页: ${newPageNum}`);
      //把最新的当前页码值 赋值 给 data中的pagenum
      this.queryInfo.pagenum = newPageNum;
      //重新发起请求 渲染 页面
      this.getgoodsList();
    },


    //3、根据 ID 查询商品--编辑
    async editById(id) {
      //发起请求，查找当前要编辑的商品
      const ret = await this.$http.get(`goods/${id}`);
      const res = ret.data;
      console.log(res);
      //判断是否成功获取当前编辑商品的数据
      if (res.meta.status !== 200) {
        return this.$message.error("获取当前商品数据失败！" + res.meta.msg);
      }
      //把获取到的当前商品数据存储到 data 中，作为编辑表单的数据源，渲染form
      this.$message.success("已成功获取当前商品数据");
      this.editFormData = res.data;

      //显示编辑对话框
      this.editDialogVisible = true;
    },


    //3、级联选择器选中项发生变化，会触发这个函数
    handleChange() {
      console.log(
        "双向绑定，级联框内选中项--商品所属的分类数组--3级:" +
          this.editFormData.goods_cat
      );
      /*    重点：控制级联选择器的选中范围：
      根据级联框内选中项的数组值--商品所属的分类数组的长度,是否 等于3，决定能否选中，是否清空数组 */

      //（1）选中的不是3级分类,级联框中不能选中任何内容
      if (this.editFormData.goods_cat.length !== 3) {
        //双向绑定，清空数组id,页面级联框中不能选中任何分类
        this.editFormData.goods_cat = [];
      }
    },



    //4、监听对话框的关闭事件，重置表单上一次的验证结果
    editClosed() {
      this.$refs.editFormDataRef.resetFields();
    },
    //5、编辑提交当前商品数据
    editgoods() {
      //提交前，对表单进行预校验
      this.$refs.editFormDataRef.validate(async (valid) => {
        console.log("验证当前编辑数据的结果：" + valid);
        //判断验证是否通过
        if (!valid) {
          return this.message.info("您的填写不正确");
        }
        //验证通过，发起请求，提交数据-------------有错误--
        const ret = await this.$http.put(
          `goods/${this.editFormData.goods_id}`,
          {
            goods_name: this.editFormData.goods_name,
            goods_price: this.editFormData.goods_price,
            goods_number: this.editFormData.goods_number,
            goods_weight: this.editFormData.goods_weight,
            goods_cat:this.editFormData.goods_cat
          }
        );
        const res = ret.data;
        console.log(res);
      });
    },

    //6、根据id删除当前商品数据
    async removeById(id) {
      //弹出询问用户是否删除对话框--MessageBox 弹框
      //删除前，询问是否删除
      const confirmResult = await this.$confirm(
        "此操作将永久删除数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      //用户点击确定删除，得到字符串 confirm
      //用户点击取消删除，得到字符串 cancel
      console.log(confirmResult);
      //根据用户点击的结果，决定是否发起请求，删除参数
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除参数！");
      }
      //发起delete请求，删除当前点击的数据
      const ret = await this.$http.delete(`goods/${id}`);
      const res = ret.data;
      console.log(res);
      //判断是否成功发起请求
      if (res.meta.status !== 200) {
        return this.$message.error("删除当前数据失败！" + res.meta + msg);
      }
      this.$message.success("已成功删除");

      //解决bug:删除最后一条数据时，跳转到前一页的条件或时机
      //当前是最后一条数据，且不是第一页页码
      //获取当前页显示的数据条数
      if (this.goodslist.length === 1 && this.queryInfo.pagenum > 1) {
        this.queryInfo.pagenum -= 1; //向前跳一页
      }

      //重新请求，渲染页面列表
      this.getgoodsList();
    },

    //7、点击添加商品按钮，跳转具体页面--编程式路由链接跳转
    goAddGoodsPage() {
      this.$router.push("/goods/add");
    },
  },
};
</script>

<style lang="less" scoped>
</style>